<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				border: 1px orange solid;
				width: 60%;
				margin: 0 auto;
				border-collapse: collapse;
			}

			table th {
				border: 1px orange solid;
				padding: 10px;
			}

			table td {
				border: 1px orange solid;
				padding: 10px;
			}

			/* table tr:nth-child(2n) {
				background-color: azure;
			} */

			/* table tr:nth-child(2n+1) {
				background-color: beige;
			} */

			table tr:nth-child(1) {
				background-color: orange;
			}

			/* 奇数 */
			.odd {
				background-color: beige;
			}

			/* 偶数 */
			.even {
				background-color: bisque;
			}

			.cur {
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<table>
			<!-- <thead></thead> -->
			<!-- <tbody></tbody> -->
			<!-- <tfoot></tfoot> -->
			<tr>
				<th>日期</th>
				<th>姓名</th>
				<th>地址</th>
			</tr>
			<tr>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
			<tr>
				<td>2022-10-20</td>
				<td>博为峰</td>
				<td>上海</td>
			</tr>
		</table>
		<script type="text/javascript">
			//获取所有的tr对于DOM对象(数组)
			var tr = document.querySelectorAll("tr");
			//遍历(Array内置对象forEach方法)
			
			//保存样式
			var original = "";
			tr.forEach(function(val, index, array) {
				//val是tr对于的DOM对象添加样式
				if (index != 0) {
					if (index % 2 == 0) { //偶数
						val.className = "even";
					} else { //奇数
						val.className = "odd";
					}
				}
				//tr获取焦点时
				val.addEventListener('mouseenter', function() {
					//先保存tr的样式
					original = this.className;
					//添加样式
					this.className = "cur";
				});
				//tr失去焦点时
				val.addEventListener('mouseleave', function() {
					this.className = original;
				});
				//事件源 事件类型  处理函数
			})
		</script>
	</body>
</html>
